@extends("admin.layouts.main")
<style>
    .card-body .form-group {
        width: 28%;
    }

    @media screen and (max-width: 1024px) {
        .card-body .form-group {
            width: 100% !important;
        }
        .my-div{
            width:90%;
        }
    }
    .show-item {
        top: 40px;
        width: 75%;
        right: 15px;
        z-index: 10;
        background: white;
        overflow: hidden;
        display: none;
    }

    .showMsg li {
        padding-bottom: 5px;
        cursor: pointer;
        padding: 10px 8px;
        margin: 2px 0;
    }

    .showMsg li:hover {
        background-color: #f2f2f2;
    }

    input::-webkit-input-placeholder { /* WebKit browsers */
        font-size: 13px;
    }

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        font-size: 13px;
    }

    input:-ms-input-placeholder { /* Internet Explorer 10+ */
        font-size: 13px;
    }
    .card{
        min-width: 1024px;
    }
</style>
@section("content")
<div class="container-fiuld p-3" id="app">
    <div class="card">
        <div class="card-body">
            <div class="pt-2 pb-2 d-flex justify-content-between align-items-center" style="background-color:#f2f2f2;font-size:18px;">
                <h4 class="pl-2">修改提现账户</h4>
                <a href="{{ route('draw.alipay') }}" class="btn btn-link">返回</a>
            </div>
            <form class="layui-form mt-3">                
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">支付宝姓名:</label>
                    <input type="text" class="form-control col-lg-4" name="name" value="{{ $alipayone->name }}" required lay-verify="required" placeholder="与公会老板一致的开户名" />
                </div>
				<div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">支付宝账号:</label>
                    <input type="text" class="form-control col-lg-4" name="alipay" value="{{ $alipayone->alipay }}" lay-verify="required" placeholder="请填写真实的支付宝账号" />
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">手机号:</label>
                    <input type="text" class="form-control col-lg-4" name="mobile"  value="{{ $alipayone->mobile }}" lay-verify="required" placeholder="请填写公会老板的真实号码" />
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">支付宝收款码:</label>
                    <input type="text" class="form-control col-lg-4" name="alipay_code" value="{{ $alipayone->alipay_code }}" lay-verify="required" placeholder="请输入收款码" />
					<span class="col-lg-3 text-danger"></span>
                </div>                
                <div class="" style="margin-left:10rem">
                    <button class="layui-btn" lay-submit lay-filter="update-upalipay" data-url="{{ route('draw.upalipay', ['id' => $alipayone->id]) }}" data-type="POST">提交</button>
                    <button type="reset" class="btn btn-danger">重置</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section("js")
<script>
    //数据操作
    layui.use(["form", "layer"], function () {
        var form = layui.form, $ = layui.$, layer = layui.layer;       
        $(".showMsg").on("click","li",function(){
            var html = $(this).html();
            if(html.indexOf("ID") != -1) {
                var id = html.split("ID")[1].trim();
            }
            $("#uid").val(id);
            $(".show-item").css({"display": "none"})
            $(".showMsg").html("");
        });
    })
	layui.use(['form', 'ori'], function () {
            var form = layui.form,
                ori = layui.ori,
                $ = layui.$;
            form.on('submit(update-upalipay)', function (data) {
                ori.submit($(this), data.field, function () {
                    window.location.reload();
                });
                return false;
            });
        });
</script>       
@endsection
